【CSS】text-align - インライン要素の水平方向位置

CSSのtext-alignプロパティについて解説します。

検証環境

CSS

macOS

14.1

text-align

text-alignは“インライン要素及びテキストの水平方向位置”のプロパティです。

主にテキストや画像などの左寄せや右寄せ、中央寄せに使用します。

基本構文

text-align: 値;

値

代表的な値は次の通りです。

値	意味
left	左寄せ
right	右寄せ
center	中央寄せ
justify	両端揃え
start	書字方向に寄せる
end	書字方向の逆に寄せる

サンプル

左寄せ

テキストを左に寄せるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-align: left;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

右寄せ

テキストを右に寄せるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-align: right;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

中央寄せ

テキストを中央に寄せるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-align: center;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

両端揃え

テキストの両端を揃えるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-align: justify;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets. CSS is a programming language that decorates elements such as HTML and XML. You can set various properties such as text color, background, and size.
</p>

プレビュー

書字方向に寄せる

テキストを書字方向に寄せるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-align: start;
    ___ih_hl_end
}
.p1 {
    direction: ltr;
}
.p2 {
    direction: rtl;
}
</style>

<p class="p1">CSS : Cascading Style Sheets</p>
<p class="p2">CSS : Cascading Style Sheets</p>

プレビュー

書字方向の逆に寄せる

テキストを書字方向の逆に寄せるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-align: end;
    ___ih_hl_end
}
.p1 {
    direction: ltr;
}
.p2 {
    direction: rtl;
}
</style>

<p class="p1">CSS : Cascading Style Sheets</p>
<p class="p2">CSS : Cascading Style Sheets</p>

プレビュー